<template>
  <div>
    <My-Header ref='HeaderComp'/>
    <hr />
    <My-Count />

    <button @click="getRef">获取header组件上的ref</button>
  </div>
</template>

<script>
import MyHeader from "./components/MyHeader";
import MyCount from './components/MyCount'

export default {
  name: "App",
  // 注册
  components: {
    MyHeader,
    MyCount
  },
  methods: {
    getRef(){
      console.log(this.$refs);
      console.log(this.$refs.HeaderComp);
      // 如果把ref属性写在一个组件上,那么$refs对象上保存的是组件实例
    }
  },
};
</script>

<style scoped>
</style>